<template>
  <div class="page">
    <NodePanel @addNode="addNode" />
    <div id="graph" ref="graphRef"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import G6 from '@antv/g6'
import NodePanel from './component/NodePanel/NodePanel.vue'

const graphRef = ref(null)

const graph = ref(null)

const graphData = {
  // 点集
  nodes: [
    {
      id: 'node1',
      x: 300,
      y: 200,
    },
    {
      id: 'node2',
      x: 600,
      y: 200,
    },
  ],
  // 边集
  edges: [
    // 表示一条从 node1 节点连接到 node2 节点的边
    {
      source: 'node1',
      target: 'node2',
    },
  ],
}

function initGraph() {
  graph.value = new G6.Graph({
    container: graphRef.value,
    width: graphRef.value.clientWidth,
    height: graphRef.value.clientHeight,
    modes: {
      default: [
        'drag-canvas',
        'zoom-canvas',
        'drag-node'
      ]
    }
  })

  graph.value.data(graphData)
  graph.value.render()
}

// 添加节点
function addNode(data) {
  const point = graph.value.getPointByClient(data.x, data.y)

  const model = {
    id: 'node' + Math.random(),
    label: data.type,
    type: data.type, // 图片类型的节点
    x: point.x,
    y: point.y
  }

  // 向画布添加节点
  graph.value.addItem('node', model, false)
}

onMounted(() => {
  initGraph()
})


</script>

<style lang="scss" scoped>
.page {
  flex: 1;
  height: 100%;
  overflow: hidden;
  position: relative;
}

#graph {
  width: 100%;
  height: 100%;
}
</style>